<template>
	<view class="content">
		<!-- <p class="loginLogo"> </p> -->
		<image  class="loginLogo" src="/static/logo.png" mode=""></image>
		<p class="loginTitle">验证码登录</p>
		<form>
			<view class="form-group">
				<label for="phoneNumber">手机号</label>
				<input id="phoneNumber" v-model="phoneNumber" type="text" placeholder="请输入手机号" />
			</view>
			<view class="form-group">
				<label for="phoneNumber">验证码</label>
				<input id="verificationCode" v-model="verificationCode" type="text" placeholder="请输入验证码" />
				<view @click="getCode" :disabled="isCounting" class="getCode">{{ countdownText }}</view>
			</view>
			<view class="buttonBox">
				<navigator class="buttomNavigator" url="/pages/my/login/h5-login" hover-class="none">已有账号？<text
						style="color:#7AAD5B;">立即登录</text></navigator>
				<view class="button01" @click="handleLogin()">登录</view>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		getUserInfo,
		getSilent
	} from '@/api/user.js';
	import {
		getCodeLogin,
		codeLogin
	} from '@/api/login.js';

	export default {
		data() {
			return {
				phoneNumber: '',
				verificationCode: '',
				isCounting: false,
				countdownTime: 60,
				countdownText: '获取验证码',
				userInfo: {},
			};
		},
		onLoad() {},
		methods: {
			getUser() {
				getUserInfo().then(res => {
					this.userInfo = res.data
					if (this.userInfo.nickName) {
						getSilent().then(res => {
							window.location.replace(res.data);
						})
						// uni.switchTab({
						// 	url: '/pages/index/index'
						// });
					} else {
						uni.redirectTo({
							url: '/pages/my/setting/index'
						});
					}
				});
			},
			validatePhoneNumber() {
				const phoneRegex = /^1[3456789]\d{9}$/;
				return phoneRegex.test(this.phoneNumber);
			},
			async getCode() {
				if (!this.validatePhoneNumber()) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				if (this.isCounting) return;
				try {
					const response = await getCodeLogin({
						phoneNumber: this.phoneNumber
					});
					if (response.code == 200) {
						this.startCountdown();
					}
				} catch (error) {
					console.error('获取验证码失败:', error);
					uni.showToast({
						title: '获取验证码失败',
						icon: 'none'
					});
				}
			},
			startCountdown() {
				this.isCounting = true;
				let timer = setInterval(() => {
					this.countdownTime--;
					this.countdownText = `${this.countdownTime}s后重新获取`;
					if (this.countdownTime <= 0) {
						clearInterval(timer);
						this.isCounting = false;
						this.countdownTime = 60;
						this.countdownText = '获取验证码';
					}
				}, 1000);
			},
			async handleLogin() {
				if (!this.validatePhoneNumber()) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}

				try {
					const response = await codeLogin({
						phoneNumber: this.phoneNumber,
						verificationCode: this.verificationCode
					});
					// 处理登录成功后的逻辑
					console.log('验证码登录成功:', response);
					if (response.code == 200) {
						localStorage.setItem('token', response.data)
						const pid = '-1'
						if (uni.getStorageSync('pid')) {
							const pid = uni.getStorageSync('pid');
						}
						getSilent(pid).then(res => {
							window.location.replace(res.data);
						})
						// this.getUser()
					}
				} catch (error) {
					console.error('验证码登录失败:', error);
				}
			}
		}
	};
</script>

<style lang="scss">
	@import './login.scss';
</style>